<template>
  <el-row class="home" :gutter="20">
    <el-col :span="8">
      <el-card class="user" style="height: 230px; width: 100%" shadow="hover">
        <!-- <div class="userinfo">
          <img src="../../assets/images/user.png" />
          <div>
            <p class="name">哈哈哈</p>
            <p class="role">管理员</p>
          </div>
        </div>
        <div class="logininfo">
          <p>来来来:<span>ashdhh</span></p>
          <p>来来来:<span>dvvv</span></p>
        </div> -->
        <div
          id="testred"
          ref="linechart"
          style="height: 190px; width: 100%"
        ></div>
      </el-card>
      <!-- <el-card
        class="user2"
        shadow="hover"
        height="450px"
        style="margin-top: 20px"
      >
      </el-card> -->
    </el-col>
    <el-col :span="16" style="margin-top: 40px" class="right-num">
      <div class="num1">
        <el-card
          shadow="hover"
          :body-style="{ display: 'flex', padding: 0 }"
          v-for="item in countData"
          :key="item.name"
        >
          <component
            class="icons"
            :is="item.icon"
            :style="{ background: item.color }"
          ></component>
          <div class="detail">
            <p class="txt">{{ item.name }}</p>
            <p class="num">{{ item.value }}</p>
          </div>
        </el-card>
      </div>
      <!-- <el-card shadow="hover" style="height: 280px">
        <div ref="echart" style="height: 280px"></div>
      </el-card> -->
    </el-col>
    <el-col :span="24" class="down-num">
      <div class="graph">
        <el-card shadow="hover" style="height: 380px">
          <div ref="userechart" style="height: 350px"></div>
        </el-card>
        <el-card shadow="hover" style="height: 380px">
          <div ref="videoechart" style="height: 350px"></div>
        </el-card>
      </div>
    </el-col>
  </el-row>
</template>
<script>
import {
  defineComponent,
  getCurrentInstance,
  onMounted,
  reactive,
  toRaw,
  watch,
} from "vue";
import * as echarts from "echarts";
import { ElMessage } from "element-plus";
import { useStore } from "vuex";
export default defineComponent({
  setup() {
    const { proxy } = getCurrentInstance();
    const store = useStore();
    const countData = reactive([
      {
        name: "装配工单",
        value: 1234,
        icon: "FolderChecked",
        color: "#2ec7c9",
      },
      {
        name: "生产计划",
        value: 210,
        icon: "FolderChecked",
        color: "#ffb980",
      },
      {
        name: "销售订单",
        value: 1234,
        icon: "FolderChecked",
        color: "#5ab1ef",
      },
      {
        name: "不良品总数",
        value: 1234,
        icon: "FolderChecked",
        color: "#2ec7c9",
      },
      {
        name: "良品率",
        value: "100%",
        icon: "FolderChecked",
        color: "#ffb980",
      },
      {
        name: "销售订单占比",
        value: "40%",
        icon: "FolderChecked",
        color: "#5ab1ef",
      },
    ]);

    onMounted(() => {
      // var redArr = reactive([]);
      // var timeArr = [];
      // // 连接redwebsocket
      // var redWs = new WebSocket("ws://127.0.0.1:1880/ws/getecharts");
      // // 接收消息
      // redWs.onmessage = function (e) {
      //   var edata = JSON.parse(e.data);
      //   // 实时数据和时间
      //   if (edata) {
      //     var dateTime = new Date();
      //     var dateTimeFormatter = dateTime.toTimeString().slice(0, 8);
      //     timeArr.push(dateTimeFormatter);
      //   }
      //   redArr.push(edata);
      //   // 接收数据和时间并且动态刷新，
      //   if (redArr.length === 7 && timeArr.length === 7) {
      //     var newRedArr = toRaw(redArr);
      //     lineHandle(newRedArr, timeArr);
      //     // 每次剔除第一个元素，从左向右动态刷新
      //     redArr.shift();
      //     timeArr.shift();
      //   }
      //   // store.commit("setRedTest", edata);
      // };
      // // redwebsocket连接成功提示
      // redWs.onopen = function () {
      //   ElMessage.success("red连接成功");
      // };
      // 折线图
      // function lineHandle(newRedArr, timeArr) {
      //   // 防止重复创建echarts实例，因为是在每次接收信息都会触发，后面需要再修改
      //   let linechart = echarts.getInstanceByDom(proxy.$refs.linechart);
      //   if (linechart == null) {
      //     linechart = echarts.init(proxy.$refs.linechart);
      //   }
      //   var DataName = ["id"];
      //   var DataA = [];
      //   if (DataA.length === 0) {
      //     DataA = ["0", "0", "0", "0", "0", "0", "0"];
      //   }
      //   DataA = newRedArr;
      //   var DataDM = timeArr;
      //   const lineOption = {
      //     title: {
      //       text: "参数实时变化图",
      //       x: "center",
      //       textStyle: {
      //         fontSize: 12,
      //       },
      //     },
      //     // backgroundColor: "#344b58",

      //     tooltip: {
      //       trigger: "axis",
      //       axisPointer: {
      //         type: "line",
      //         textStyle: {
      //           color: "#fff",
      //         },
      //       },
      //       // formatter: "{b}<br />{a}: {c}人",
      //       //backgroundColor: 'rgba(0,0,0,0.7)', //提示背景
      //     },
      //     grid: {
      //       top: "15%",
      //       left: "10%",
      //       right: "11%",
      //       bottom: "5%",
      //       containLable: true,
      //     },
      //     // 图例 id
      //     legend: {
      //       align: "left",
      //       right: "5%",
      //       top: "3%",
      //       textStyle: {
      //         color: "#666",
      //         fontSize: 8,
      //       },
      //       icon: "pin",
      //       itemGap: 20,
      //       itemWidth: 15,
      //       itemHeight: 5,
      //       data: DataName,
      //     },
      //     xAxis: [
      //       {
      //         name: "时间",
      //         nameLocation: "end",
      //         type: "category",
      //         boundaryGap: false,
      //         axisLine: {
      //           show: false,
      //           lineStyle: {
      //             color: "#666",
      //             width: 1,
      //           },
      //         },
      //         // x轴标签
      //         axisLabel: {
      //           show: false,
      //           // textStyle: {
      //           //   color: "#666",
      //           //   padding: [10, 0, 0, 0],
      //           //   fontSize: 8,
      //           // },
      //         },
      //         splitLine: {
      //           show: false,
      //         },
      //         // x轴刻度
      //         axisTick: {
      //           show: false,
      //         },
      //         data: DataDM,
      //       },
      //     ],
      //     yAxis: [
      //       {
      //         name: "变量",
      //         nameTextStyle: {
      //           color: "#666",
      //           fontSize: 6,
      //           padding: [0, 0, 0, 0],
      //           lineHeight: 5,
      //         },
      //         min: Math.min(...DataA),
      //         splitLine: {
      //           show: true,
      //           lineStyle: {
      //             color: "rgba(200,200,200,.5)",
      //             type: "dashed",
      //           },
      //         },
      //         axisLine: {
      //           show: false,
      //         },
      //         axisLabel: {
      //           show: true,
      //           color: "#666",
      //           padding: 5,
      //           fontSize: 12,
      //         },
      //         axisTick: {
      //           show: false,
      //         },
      //       },
      //     ],
      //     series: [
      //       {
      //         name: DataName[0],
      //         type: "line",
      //         showAllSymbol: true,
      //         symbolSize: 6,
      //         symbol: "circle",
      //         smooth: true, //转弯处平滑过渡
      //         lineStyle: {
      //           width: 1,
      //           color: "#409eff",
      //           borderColor: "rgba(0,0,0,.4)",
      //         },
      //         itemStyle: {
      //           color: "#409eff",
      //         },
      //         tooltip: {
      //           show: true,
      //         },
      //         data: DataA,
      //       },
      //     ],
      //   };
      //   linechart.setOption(lineOption);
      //   // 每一秒刷新一次表盘
      //   // setInterval(function () {
      //   //   linechart.setOption({
      //   //     series: [
      //   //       {
      //   //         data: [
      //   //           {
      //   //             value: DataA,
      //   //           },
      //   //         ],
      //   //       },
      //   //     ],
      //   //   });
      //   // }, 1000);
      // }

      // 饼状图
      const videoechart = echarts.init(proxy.$refs.videoechart);
      const option = {
        title: {
          text: "不良品项分布",
          x: "0%",
          textStyle: {
            color: "#292f3f",
            fontSize: "18",
          },
        },
        color: [
          "#37a2da",
          "#32c5e9",
          "#9fe6b8",
          "#ffdb5c",
          "#ff9f7f",
          "#fb7293",
          "#e7bcf3",
          "#8378ea",
        ],
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b} : {c} ({d}%)",
        },
        toolbox: {
          show: true,
        },
        legend: {
          type: "scroll",
          orient: "vertical",
          left: "0%",
          align: "left",
          top: "middle",
          textStyle: {
            color: "#8C8C8C",
          },
          height: 150,
        },
        series: [
          {
            name: "不良",
            type: "pie",
            radius: [0, 130],

            data: [
              { value: 20, name: "不能折叠" },
              { value: 30, name: "毛刺" },
              { value: 25, name: "rose3" },
              { value: 25, name: "rose4" },
              { value: 20, name: "rose5" },
              { value: 35, name: "rose6" },
              { value: 30, name: "rose7" },
              { value: 40, name: "rose8" },
            ],
          },
        ],
      };
      videoechart.setOption(option);
      // 柱状图
      const userechart = echarts.init(proxy.$refs.userechart);
      var xData = (function () {
        var data = [];
        for (var i = 1; i < 13; i++) {
          data.push(i + "");
        }
        return data;
      })();
      const option2 = {
        title: {
          text: "工序计划数",
          x: "4%",
          textStyle: {
            color: "#292f3f",
            fontSize: "18",
          },
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
            textStyle: {
              color: "#666",
            },
          },
        },
        grid: {
          borderWidth: 0,
          top: 100,
          bottom: 50,
          textStyle: {
            color: "#fff",
          },
        },
        legend: {
          x: "4%",
          top: "10%",
          textStyle: {
            color: "#90979c",
          },
          data: ["A", "B"],
        },

        calculable: true,
        xAxis: [
          {
            type: "category",
            axisLine: {
              lineStyle: {
                color: "#90979c",
              },
            },
            splitLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            splitArea: {
              show: false,
            },
            axisLabel: {
              interval: 0,
            },
            data: xData,
          },
        ],
        yAxis: [
          {
            type: "value",
            splitLine: {
              show: false,
            },
            axisLine: {
              lineStyle: {
                color: "#90979c",
              },
            },
            axisTick: {
              show: false,
            },
            axisLabel: {
              interval: 0,
            },
            splitArea: {
              show: false,
            },
          },
        ],

        series: [
          {
            name: "A",
            type: "bar",
            stack: "总量",
            barMaxWidth: 35,
            barGap: "10%",
            itemStyle: {
              color: "rgba(255,144,128,1)",
              label: {
                show: true,
                textStyle: {
                  color: "#fff",
                },
                position: "insideTop",
                formatter: function (p) {
                  return p.value > 0 ? p.value : "";
                },
              },
            },
            data: [198, 330, 151, 160, 222, 229, 128, 250, 224, 473, 126, 260],
          },

          {
            name: "B",
            type: "bar",
            stack: "总量",
            itemStyle: {
              color: "rgba(0,191,183,1)",
              borderRadius: 0,
              label: {
                show: true,
                position: "top",
                formatter: function (p) {
                  return p.value > 0 ? p.value : "";
                },
              },
            },
            data: [82, 67, 62, 59, 67, 67, 35, 71, 81, 78, 79, 72],
          },
        ],
      };
      userechart.setOption(option2);
    });

    return {
      countData,
    };
  },
  created() {
    console.log("home页面创建了");
  },
  unmounted() {
    console.log("home页面被销毁了了");
  },
});
</script>

<style lang="less" scoped>
.home {
  .userinfo {
    display: flex;
    align-items: center;
    padding-bottom: 20px;
    border-bottom: 1px solid #ccc;
    margin-bottom: 20px;
    img {
      width: 100px;
      height: 100px;
      border-radius: 50%;
      margin-right: 30px;
    }
    p {
      line-height: 30px;
    }
  }
  .logininfo {
    p {
      line-height: 30px;
      font-size: 15px;
      color: #999;

      span {
        margin-left: 50px;
        color: #666;
      }
    }
  }
  .num1 {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    .el-card {
      width: 32%;
      margin-bottom: 20px;
    }
    .icons {
      width: 80px;
      height: 80px;
      font-size: 30px;
      text-align: center;
      line-height: 80px;
      color: #fff;
    }
    .detail {
      margin-left: 15px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      .num {
        font-size: 30px;
      }
      .txt {
        font-size: 14px;
        text-align: center;
        color: #999;
        margin-bottom: 10px;
      }
    }
  }
  .graph {
    margin-top: 15px;
    height: 360px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .el-card {
      width: 49%;
    }
  }
}
</style>
